<script lang="ts" setup>
import { markRaw, ref, defineComponent, defineOptions } from "vue";

// 封装element-plus的el-col组件
import ReCol from "@/components/ReCol";

import { randomGradient, useDark } from "@pureadmin/utils";

// 数字动画
import { ReNormalCountTo } from "@/components/ReCountTo";
import { ChartLine, ChartClock, ChartPie, CombinedChart } from "./components";
// 分段控制器组件
import Segmented from "@/components/ReSegmented";
// 封装数据 --> 请求接口
import { useDashboard } from "@/views/welcome/hook";

defineOptions({
  name: "Welcome"
});
const dashBoard = useDashboard();
const chartDatas = dashBoard.chartData;

const { isDark } = useDark();

let curWeek = ref(1);
defineComponent({
  components: {},
  data() {
    return {
      chartDatas: {
        type: Array,
        default: []
      }
    };
  },
  setup() {
    return {
      chartDatas
    };
  }
});
</script>

<template>
  <div>
    <el-row :gutter="24" justify="space-around">
      <!-- 指标卡 -->
      <re-col
        v-for="(item, index) in chartDatas"
        :key="index"
        v-motion
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80 * (index + 1)
          }
        }"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :md="12"
        :sm="12"
        :value="6"
        :xs="24"
        class="mb-[18px]"
      >
        <el-card class="line-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium">
              {{ item.name }}
            </span>
            <div
              :style="{
                backgroundColor: isDark ? 'transparent' : item.bgColor
              }"
              class="w-8 h-8 flex justify-center items-center rounded-md"
            >
              <IconifyIconOffline
                :color="item.color"
                :icon="item.icon"
                width="18"
              />
            </div>
          </div>
          <div class="flex justify-between items-start mt-3">
            <div class="w-1/2">
              <ReNormalCountTo
                :duration="item.duration"
                :endVal="item.value"
                :fontSize="'2em'"
                :startVal="100"
                :value="item.duration"
              />
              <p class="font-medium text-blue-400">{{ item.percent }}</p>
            </div>
            <!-- <ChartLine
              v-if="item.data.length > 1"
              :color="item.color"
              :data="item.data"
              class="!w-1/2"
            /> -->
            <!-- <ChartRound v-else class="!w-1/2" /> -->
          </div>
        </el-card>
      </re-col>

      <!-- 实时时间 -->
      <re-col
        v-motion
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 80 * 4
          }
        }"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :md="12"
        :sm="12"
        :value="6"
        :xs="24"
        class="mb-[18px]"
      >
        <el-card
          :body-style="{ padding: '0' }"
          class="line-card"
          shadow="never"
        >
          <ChartClock />
        </el-card>
      </re-col>

      <re-col
        v-motion
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :value="24"
        :xs="24"
        class="mb-[18px]"
      >
        <el-card class="bar-card" shadow="never">
          <div class="flex justify-between">
            <span class="text-md font-medium"> 分析概览 </span>
          </div>
          <div class="flex justify-between items-start mt-3">
            <ChartLine />
            <ChartPie />
          </div>
        </el-card>
      </re-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card) {
  --el-card-border-color: none;

  /* 隐藏 el-scrollbar 滚动条 */
  .el-scrollbar__bar {
    display: none;
  }

  /* el-timeline 每一项上下、左右边距 */
  .el-timeline-item {
    margin: 0 6px;
  }
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
